<template>
  <div>
    <el-main>
      <!-- 新增人员弹框-->
      <el-dialog
        title="新增人员信息"
        :visible.sync="addFormVisible"
        width="60%"
      >
        <el-form ref="insertForm" :model="insertForm" label-width="70px">
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="insertForm.name"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="性别" prop="gender">
                <el-select
                  v-model="insertForm.gender"
                  placeholder="请选择性别"
                  style="width: 250px"
                >
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="年级" prop="grade">
                <el-select
                  v-model="insertForm.grade"
                  placeholder="请选择年级"
                  style="width: 250px"
                >
                  <el-option
                    v-for="option in gradeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="班级" prop="className">
                <el-input
                  v-model="insertForm.className"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="专业" prop="major">
                <el-input
                  v-model="insertForm.major"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="职位" prop="position">
                <el-input
                  v-model="insertForm.position"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="手机号" prop="phone">
                <el-input
                  v-model="insertForm.phone"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="QQ号" prop="qq">
                <el-input
                  v-model="insertForm.qq"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="账户密码" prop="password">
                <el-input
                  v-model="insertForm.password"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitInsertFrom('insertForm')"
            >确 定</el-button
          >
          <el-button @click="resetForm('insertForm')">重置</el-button>
        </div>
      </el-dialog>

      <!-- 修改人员弹框-->
      <el-dialog
        title="修改人员信息"
        :visible.sync="updateFormVisible"
        width="60%"
      >
        <el-form ref="updateForm" :model="updateForm" label-width="70px">
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="updateForm.name"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="性别" prop="gender">
                <el-select
                  v-model="updateForm.gender"
                  placeholder="请选择性别"
                  style="width: 250px"
                >
                  <el-option
                    v-for="option in genderOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="年级" prop="grade">
                <el-select
                  v-model="updateForm.grade"
                  placeholder="请选择年级"
                  style="width: 250px"
                >
                  <el-option
                    v-for="option in gradeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="班级" prop="className">
                <el-input
                  v-model="updateForm.className"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="专业" prop="major">
                <el-input
                  v-model="updateForm.major"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="职位" prop="position">
                <el-input
                  v-model="updateForm.position"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="手机号" prop="phone">
                <el-input
                  v-model="updateForm.phone"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="1" :sm="1" :md="2" :lg="2" :xl="2">
              <br />
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="QQ号" prop="qq">
                <el-input
                  v-model="updateForm.qq"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="20" :sm="20" :md="20" :lg="10" :xl="8">
              <el-form-item label="账户密码" prop="password">
                <el-input
                  v-model="updateForm.password"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEditeFrom('updateForm')"
            >确 定</el-button
          >
          <el-button @click="resetForm('updateForm')">重置</el-button>
        </div>
      </el-dialog>

      <!-- 查询表单 -->
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="searchForm.gender" placeholder="性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="addFormVisible = true"
            >新增人员</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column label="性别" width="100">
          <template slot-scope="scope">
            {{ getGenderLabel(scope.row.gender) }}
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="年级" width="100">
          <template slot-scope="scope">
            {{ getGradeLabel(scope.row.grade) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="className"
          label="班级"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="major"
          label="专业"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="position"
          label="职位"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="150"
        ></el-table-column>
        <el-table-column prop="qq" label="QQ" width="150"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="openUpdateForm(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="deleteMembers(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <br />

      <!-- 分页条 -->
      <!-- Pagination 分页 -->
      <el-pagination
        background
        layout="total,sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      >
      </el-pagination>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addFormVisible: false,
      updateFormVisible: false,
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        entrydate: [],
      },

      insertForm: {
        name: "",
        gender: "",
        major: "",
        grade: "",
        className: "",
        position: "",
        phone: "",
        qq: "",
        password: "",
      },
      updateForm: {
        id: "",
        name: "",
        gender: "",
        major: "",
        grade: "",
        className: "",
        position: "",
        phone: "",
        qq: "",
        password: "",
      },
      genderOptions: [
        { label: "男", value: 1 },
        { label: "女", value: 0 },
      ],
      gradeOptions: [
        { label: "大一", value: 1 },
        { label: "大二", value: 2 },
        { label: "大三", value: 3 },
        { label: "大四", value: 4 },
        { label: "研一", value: 5 },
        { label: "研二", value: 6 },
        { label: "研三", value: 7 },
        { label: "老师", value: 8 },
      ],
      loading: false, // 控制加载状态的变量
      total: 0, // 总数据条数
    };
  },
  methods: {
    submitEditeFrom(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .put("http://localhost:8080/admin/people", this.updateForm)
            .then((response) => {
              if (response.data.code === 1) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.updateFormVisible = false; // 关闭对话框
                this.resetForm(formName); // 重置表单
                this.fetchData(1); // 重新加载数据
              } else {
                this.$message({
                  message: "修改失败",
                  type: "error",
                });
              }
            })
            .catch((error) => {
              console.error("修改失败:", error);
              this.$message({
                message: "修改失败",
                type: "error",
              });
            });
        } else {
          this.$message({
            message: "请检查表单输入",
            type: "warning",
          });
          return false;
        }
      });
    },
    deleteMembers(ids) {
      this.$confirm("此操作将永久删除该人员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(`http://localhost:8080/admin/people/${ids}`)
            .then((response) => {
              if (response.data.code === 1) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                // 重新加载数据
                this.fetchData(1);
              } else {
                this.$message({
                  message: "删除失败",
                  type: "error",
                });
              }
            })
            .catch((error) => {
              console.error("删除失败:", error);
              this.$message({
                message: "删除失败",
                type: "error",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitInsertFrom() {
      this.$axios
        .post("http://localhost:8080/admin/people", this.insertForm)
        .then((response) => {
          if (response.data.code === 1) {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.resetForm("insertForm");
            this.addFormVisible = false;
            this.handleSizeChange();
          } else {
            this.$message({
              message: "新增失败",
              type: "error",
            });
          }
        });
    },
    search() {},
    // 清空表单
    resetForm(formName) {
      const form = this[formName];
      for (let key in form) {
        form[key] = "";
      }
    },
    //分页查询
    fetchData(page) {
      this.loading = true; // 开始加载时设置为 true
      this.$axios
        .get("http://localhost:8080/admin/people/page", {
          params: {
            page: page,
            pageSize: 10, // 每页显示的数据条数
          },
        })
        .then((response) => {
          this.tableData = response.data.data.records;
          this.total = response.data.data.total; // 总数据条数
          this.loading = false; // 加载成功后设置为 false
        })
        .catch((error) => {
          console.error("数据加载失败:", error);
          this.loading = false; // 加载失败后设置为 false
        });
    },
    handleSizeChange() {
      this.fetchData(1); // 切换每页记录数时重新加载第一页数据
    },
    handleCurrentChange(val) {
      this.fetchData(val); // 切换页码时加载对应页的数据
    },
    // 打开修改弹框时初始化表单
    openUpdateForm(row) {
      this.updateFormVisible = true
      this.updateForm = JSON.parse(JSON.stringify(row)); // 创建深拷贝
    },
    // 获取性别标签
    getGenderLabel(gender) {
      return gender === 1 ? "男" : "女";
    },
    // 获取年级标签
    getGradeLabel(grade) {
      const option = this.gradeOptions.find((option) => option.value === grade);
      return option ? option.label : "";
    },
  },
  mounted() {
    this.fetchData(1);
  },
};
</script>

<style></style>
